import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Query } from 'react-apollo'
import {
  Grid, Header, Feed, Label, List,
} from 'semantic-ui-react'
import { dataset as datasetDuck } from 'ducks'
import { Section, PaddingColumn } from 'components/paddingGrid'
import { Line } from 'react-chartjs-2'
import getDataset from 'graphql/getDataset.graphql'

const chardata = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40],
    },
  ],
}

class Overview extends React.Component {
  static propTypes = {
    actionSetActiveTab: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { actionSetActiveTab } = this.props
    actionSetActiveTab('overview')
  }

  render() {
    const { activeDatasetId } = this.props
    if (!activeDatasetId) {
      return null
    }
    return (
      <Query
        query={getDataset}
        variables={{ id: activeDatasetId }}
        onCompleted={data => console.log(data)}
      >
        {({ loading, error, data }) => {
          console.log('====================',data)
          if (loading) return 'Loading...'
          if (error) return `Error! ${error.message}`
          const dataset = data.dataset[0]
          return (
            <Grid columns="two" divided>
              <Grid.Row>
                <PaddingColumn width="5">
                  <Section>
                    <Header as="h3" dividing>
                      基本信息
                    </Header>
                    <List relaxed verticalAlign="middle">
                      <List.Item>
                        <List.Content floated="right">
                          <Label color="blue">{dataset.name}</Label>
                        </List.Content>
                        <List.Content>名称</List.Content>
                      </List.Item>
                      <List.Item>
                        <List.Content floated="right">
                          <Label color="blue">{dataset.file_number}</Label>
                        </List.Content>
                        <List.Content>文件数量</List.Content>
                      </List.Item>
                      <List.Item>
                        <List.Content floated="right">
                          <Label color="blue">{dataset.space_size}</Label>
                        </List.Content>
                        <List.Content>占用空间</List.Content>
                      </List.Item>
                      <List.Item>
                        <List.Content floated="right">
                          <Label color="blue">{dataset.file_type}</Label>
                        </List.Content>
                        <List.Content>文件类型</List.Content>
                      </List.Item>
                    </List>
                  </Section>
                  <Section>
                    <Header as="h3" dividing>
                      Dividing Header
                    </Header>
                    <Feed size="large">
                      <Feed.Event>
                        <Feed.Label image="https://react.semantic-ui.com/images/wireframe/media-paragraph.png" />
                        <Feed.Content>
                          <Feed.Date content="1 day ago" />
                          <Feed.Summary>
                            You added
                            {' '}
                            <a>Jenny Hess</a>
                            {' '}
to your
                            {' '}
                            <a>coworker</a>
                            {' '}
group.
                          </Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>

                      <Feed.Event>
                        <Feed.Label image="https://react.semantic-ui.com/images/wireframe/media-paragraph.png" />
                        <Feed.Content>
                          <Feed.Date content="3 days ago" />
                          <Feed.Summary>
                            You added
                            {' '}
                            <a>Molly Malone</a>
                            {' '}
as a friend.
                          </Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>

                      <Feed.Event>
                        <Feed.Label image="https://react.semantic-ui.com/images/wireframe/media-paragraph.png" />
                        <Feed.Content>
                          <Feed.Date content="4 days ago" />
                          <Feed.Summary>
                            You added
                            {' '}
                            <a>Elliot Baker</a>
                            {' '}
to your
                            {' '}
                            <a>musicians</a>
                            {' '}
group.
                          </Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>
                    </Feed>
                  </Section>
                </PaddingColumn>

                <PaddingColumn width="11">
                  <Line width={80} height={40} data={chardata} />
                </PaddingColumn>
              </Grid.Row>
            </Grid>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
  activeDatasetId: datasetDuck.selectors.activeDatasetId(state),
})

const mapDispatchToProps = {
  actionSetActiveTab: datasetDuck.creators.actionSetActiveTab,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Overview)
